<template>

  <a-modal v-model:visible="LAYER.visible" :title="LAYER.title" :width="650" :ok-text="LAYER.okText"
           :align-center="LAYER.alignCenter" :top="LAYER.top"
           :footer="false" :body-style="{padding:0}"
           :closable="LAYER.closable" :unmount-on-close="LAYER.unmountOnClose"
           :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose" :ok-loading="LAYER.okLoading"
           @cancel="onClose()">
    <div id="playerDom"  ></div>

  </a-modal>

</template>

<script lang="ts" setup>
import  EZUIKit from 'ezuikit-js';
import { Notification } from '@arco-design/web-vue';
import {ref}  from  'vue'
import {LocalModal} from '@/libs/core';
import {ProductHttp} from '../../resource/http';

const props = defineProps({
  record: {type: Object, required: true}
});
const emit = defineEmits(['close']);
const service = new LocalModal(emit).setMD('监控');
const {LAYER} = service;
const show=ref(false)
LAYER.width=800

const formRef=ref(null)

let player=null
const themeData = {
  "header": {
    "color": "#1890ff",
    "activeColor": "#FFFFFF",
    "backgroundColor": "#000000",
    "btnList": [
      {
        "iconId": "deviceID",
        "part": "left",
        "defaultActive": 0,
        "memo": "顶部设备序列号",
        "isrender": 1
      },
      {
        "iconId": "deviceName",
        "part": "left",
        "defaultActive": 0,
        "memo": "顶部设备名称",
        "isrender": 1
      },
      {
        "iconId": "cloudRec",
        "part": "right",
        "defaultActive": 0,
        "memo": "云存储",
        "isrender": 0
      },
      {
        "iconId": "rec",
        "part": "right",
        "defaultActive": 0,
        "memo": "SD卡回放",
        "isrender": 0
      }
    ]
  },
  "footer": {
    "color": "#FFFFFF",
    "activeColor": "#1890FF",
    "backgroundColor": "#00000021",
    "btnList": [
      {
        "iconId": "play",
        "part": "left",
        "defaultActive": 1,
        "memo": "播放",
        "isrender": 1
      },
      {
        "iconId": "capturePicture",
        "part": "left",
        "defaultActive": 0,
        "memo": "截屏按钮",
        "isrender": 1
      },
      {
        "iconId": "sound",
        "part": "left",
        "defaultActive": 0,
        "memo": "声音按钮",
        "isrender": 1
      },
      {
        "iconId": "pantile",
        "part": "left",
        "defaultActive": 0,
        "memo": "云台控制按钮",
        "isrender": 1
      },
      {
        "iconId": "recordvideo",
        "part": "left",
        "defaultActive": 0,
        "memo": "录制按钮",
        "isrender": 1
      },
      {
        "iconId": "talk",
        "part": "left",
        "defaultActive": 0,
        "memo": "对讲按钮",
        "isrender": 1
      },
      {
        "iconId": "zoom",
        "part": "left",
        "defaultActive": 0,
        "memo": "电子放大",
        "isrender": 1
      },
      {
        "iconId": "hd",
        "part": "right",
        "defaultActive": 0,
        "memo": "清晰度切换按钮",
        "isrender": 1
      },
      {
        "iconId": "webExpend",
        "part": "right",
        "defaultActive": 0,
        "memo": "网页全屏按钮",
        "isrender": 1
      },
      {
        "iconId": "expend",
        "part": "right",
        "defaultActive": 0,
        "memo": "全局全屏按钮",
        "isrender": 1
      }
    ]
  }
};


const onLoadUlr = async () => {
  show.value=true
  const x = {'id': props.record.id}
  const {data} = await ProductHttp.getCameraDetailAddress(x)
  const pa = JSON.parse(data);
  console.log("请求的结果：", pa.url)
  console.log(formRef.value)



  player = new EZUIKit.EZUIKitPlayer({
    id: 'playerDom', // 视频容器ID
    accessToken: pa.accessToken,
    width: 650,
    height: 400,
    url: pa.url,
    template: 'pcLive' ,
    handleError: ()=>{
      console.log("打开失败")
      Notification.error({
        title: '打开失败',
        content: '设备拉去失败!',
      })
    }
  })



}

const onClose=async ()=>{
  await player.stop()
  service.onCancel('NONE')
}

onLoadUlr()

</script>

<style scoped lang="less">
#playerDom{
  background-color: #000000;
  width: 100%;
  height: 400px;
}

:deep(.arco-modal-body){
  padding-top: 0;
}

</style>
